<!DOCTYPE html>
<html>

<head>

    <title>Mapbox Demo</title>
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoibGF0cmlzdGFuIiwiYSI6ImNrbWVtOTh0bzJ3aHIycWtuZnRnM2YxeW0ifQ.4rua_9rcjvfORJdLI_1JQw';
        var map = new mapboxgl.Map({
            container: 'map', // container id
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "type": "raster",
                        "tiles": ["http://t0.tianditu.com/vec_w/wmts?service=WMTS&version=1.0.0&request=GetTile&layer=vec&style=default&format=tiles&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}"],
                        "tileSize": 256,
                    }
                },
                "layers": [{
                    "id": "tdt-img-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 22
                }]
            },
            center: [116.40, 39.40], // starting position
            zoom: 10, // starting zoom
            minZoom: 1,
            maxZoom: 18
        });
    </script>
</body>

</html>